<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-17 10:40:59
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-25 10:54:52
 * @FilePath: \vue3-progect\src\views\example\three\study\SphereGeometry.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--球体缓存几何-->
<template>
	<div id="three_container"></div>
</template>

<script setup>
import * as THREE from "three";
import { AxesHelper } from "../case/helper/AxesHelper";
import { CameraHelper } from "../case/helper/CameraHelper";
import { WebGLRenderer } from "../create/renderer";
import { OrbitControlsHelper } from "../case/helper/OrbitControls";
import { PerspectiveCamera } from "../create/camera";
import { onMounted } from "vue";

//场景
const scene = new THREE.Scene();
AxesHelper(THREE, scene);
onMounted(() => {
	let container = document.getElementById("three_container");

	const camera = PerspectiveCamera(
		THREE,
		90,
		container.offsetWidth / container.offsetHeight,
		0.1,
		1000
	);
	camera.position.z = 200;
	CameraHelper(THREE, scene, camera);
	const renderer = WebGLRenderer(THREE, container);
	OrbitControlsHelper(THREE, scene, camera, renderer);
	function animate() {
		requestAnimationFrame(animate);
		renderer.render(scene, camera);
	}
	animate();
	const radius = 100;
	const widthSegments = 32;
	const heightSegments = 16;
	const phiStart = 0;
	const phiLength = Math.PI * 2;
	const thetaStart = 0;
	const thetaLength = Math.PI / 2;
	const geometry = new THREE.SphereGeometry(
		radius,
		widthSegments,
		heightSegments,
		phiStart,
		phiLength,
		thetaStart,
		thetaLength
	);
	const material = new THREE.MeshBasicMaterial({
		color: 0x0000ff,
		side: true,
		wireframe: true
	});
	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);
});
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
</style>
